<template>
    <div>
        <el-button type="primary" @click="exit">返回</el-button>
        <div id="main">
            <el-form  ref="form" :rules="rules" :model="teacher" label-width="80px">
                <el-form-item hidden class="lableTitle" label="教师姓名">
                    <el-input type="hidden" class="input" v-model="teacher.baseId"/>
                </el-form-item>

                <el-form-item class="lableTitle" prop="teacherName" label="教师姓名">
                    <el-input required  class="input" v-model="teacher.teacherName"/>
                </el-form-item>
                <el-form-item class="lableTitle" label="教师性别" prop="sex">
                    <el-radio-group v-model="teacher.sex">
                        <el-radio :label="0">男</el-radio>
                        <el-radio :label="1">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item class="lableTitle" prop="task" label="课题名称">
                    <el-input class="input" v-model="teacher.task"></el-input>
                </el-form-item>
                <el-form-item class="lableTitle" prop="duty" label="教师职务" >
                    <el-input class="input" v-model="teacher.duty"></el-input>
                </el-form-item>
                <!--            文件上传-->
                <el-form-item class="lableTitle" label="照片上传">
                    <el-upload
                            name="file"
                            action="/api/Studies_to_travel/upload/singleFile"
                            list-type="picture-card"
                            :on-preview="handlePictureCardPreview"
                            :on-remove="handleRemove"
                            :on-success="success">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </el-form-item>

                <el-form-item class="lableTitle" label="教师简介" prop="brief">
                    <el-input
                            type="textarea"
                            :rows="8"
                            placeholder="请输入内容"
                            v-model="teacher.brief"
                            style="width: 550px">
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="danger" @click.prevent="onSubmit('form')" style="width: 220px;margin-left: 120px">保存</el-button>
                </el-form-item>
            </el-form>
        </div>

    </div>
</template>

<script>
    import {Button, Form, FormItem, Input, Radio, Upload,Dialog,RadioGroup} from "element-ui";
    import {post} from "@/request/AxiosMAX";

    export default {
        name: "TeacherRegister",
        components:{
            "el-dialog":Dialog,
            "el-form": Form,
            "el-form-item": FormItem,
            "el-input": Input,
            "el-radio": Radio,
            "el-upload": Upload,
            "el-button": Button,
            "el-radio-group":RadioGroup
        },
        data(){
            return {
                title:"师资介绍",
                teacherImageUrl: '',
                dialogImageUrl: '',
                dialogVisible: false,
                disabled: false,
                teacher: {
                    baseId:this.$store.state.base.id,
                    teacherImageUrl:null,
                    teacherName:null,
                    task:null,
                    duty:null,
                    sex: 0,
                    brief:null,
                },
                rules:{
                    teacherName: [
                        { required: true, message: '请输入教师名字', trigger: 'blur' },
                        { min: 1, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                    sex: [
                        {  required: true, message: '请选择性别', trigger: 'change' }
                    ],
                    task: [
                        { required: true, message: '请输入课题', trigger: 'change' }
                    ],
                    duty: [
                        { required: true, message: '请输入职务', trigger: 'change' }
                    ],
                    brief: [
                        { required: true, message: '请输入简介', trigger: 'change' }
                    ]


                }
            }
        },
        methods: {
            //返回老师列表
            exit(){
                this.$router.push("/base/teachersDetails/TeacherList");
            },
            //上传成功
            success(res){
                this.teacher.teacherImageUrl=res.data;
            },
            //请求添加
            onSubmit(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid){
                        //发送post请求
                        post("/api/Studies_to_travel/teacher/insert",this.teacher)
                            .then(res=>{
                                if (res.code===0){
                                    console.info(res);
                                    this.$refs[formName].resetFields();
                                    this.$message({
                                        message: '保存成功~',
                                        type: 'success'
                                    });
                                }
                            });
                    }
                })

            },
            //移除图片
            handleRemove(file, fileList) {
                this.teacher.teacherImageUrl=null;
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                this.dialogImageUrl = file.url;
                this.dialogVisible = true;
            }
        }
    }
</script>

<style scoped>

    #main{
        margin-left: 20%;
    }
    .title2 {
        font-size: 20px;
        margin: 30px 0px;
    }

    .input {
        width: 400px;
    }

    .lableTitle {
        font-weight: bold;
    }

</style>
